<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷计算</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066CC',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
	
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .tab-active {
                @apply border-b-2 border-primary text-primary font-medium;
            }
            .btn-hover {
                @apply hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center" >
            <div class="flex items-center space-x-2">
                <i class="fa fa-home text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">佳和房产-房贷计算</h1>
            </div>

        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="max-w-5xl mx-auto">
            <!-- 页面标题 -->
            <div class="text-center mb-8">
                <h5 class="text-[clamp(1.8rem,4vw,2.5rem)] text-dark mb-3"></h5>
                <p align="left" class="text-gray-500 max-w-2xl mx-auto "> &emsp;&emsp;我们提供的购房成本计算仅供参考，最终结果请以银行与住房公积金管理中心的核定为准。</p>
          </div>

            <!-- 计算卡片 -->
            <div class="bg-white rounded-xl card-shadow p-6 md:p-8 mb-8">
                <!-- 贷款模式选择 -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold mb-4">贷款模式</h3>
                  <div class="flex flex-wrap gap-1">
                        <button id="mode-commercial" class="tab-active py-2 px-1 rounded-md border-b-2 border-primary text-primary font-medium">
                            <i class="fa fa-building-o mr-1"></i>商业贷款
                        </button>
                        <button id="mode-fund" class="py-2 px-1 rounded-md border-b-2 border-transparent text-gray-300 hover:text-gray-300 transition-colors">
                            <i class="fa fa-university mr-1"></i>公积金贷款
                        </button>
                        <button id="mode-combined" class="py-2 px-1 rounded-md border-b-2 border-transparent text-gray-300 hover:text-gray-300 transition-colors">
                            <i class="fa fa-exchange mr-1"></i>组合贷款
                        </button>
                  </div>
                </div>

                <!-- 计算方式选择 -->
                <div class="mb-8">
                    <h3 class="text-lg font-semibold mb-4">计算方式</h3>
                    <div class="flex flex-wrap gap-3">
                        <button id="method-total" class="tab-active py-2 px-4 rounded-md border-b-2 border-primary text-primary font-medium">
                            <i class="fa fa-calculator mr-1"></i>按贷款总额
                        </button>
                        <button id="method-house" class="py-2 px-4 rounded-md border-b-2 border-transparent text-gray-600 hover:text-gray-800 transition-colors">
                            <i class="fa fa-home mr-1"></i>按房屋总额
                        </button>
                    </div>
                </div>

                <!-- 计算表单 - 按贷款总额 -->
                <div id="form-total" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div >
                            <label for="loan-amount" class="block text-sm font-medium text-gray-700 mb-1">贷款总额 (万元)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-cny"></i>                                </span>
                                <input name="number" type="number" 
                                    class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus" id="loan-amount" value="100" min="1" max="10000">
                            </div>
                        </div>
                        <div >
                            <label for="loan-years" class="block text-sm font-medium text-gray-700 mb-1">贷款期限 (年)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                              </span>
                                <select name="select" class="w-full pl-3 text-center pr-0 py-3 border border-gray-300 rounded-lg input-focus" id="loan-years">
                                  <option value="5">5年</option>
                                  <option value="10">10年</option>
                                  <option value="15">15年</option>
                                  <option value="20">20年</option>
                                  <option value="25">25年</option>
                                  <option value="30" selected>30年</option>
                                </select>
                            </div>
                        </div>
                        <div >
                            <label for="loan-rate" class="block text-sm font-medium text-gray-700 mb-1">年利率 (%)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-percent"></i>
                                </span>
                                <input type="number" id="loan-rate" value="3.5" min="0" max="30" step="0.01" 
                                    class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                            </div>
                        </div>

                        <div class="row">
                            <label for="repayment-type" class="block text-sm font-medium text-gray-700 mb-1">还款方式</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    
                                </span>
                                <select id="repayment-type" class="w-full text-center  pr-0 py-3 border border-gray-300 rounded-lg input-focus">
                                    <option value="equal-principal-interest">等额本息</option>
                                    <option value="equal-principal">等额本金</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 计算表单 - 按房屋总额 (默认隐藏) -->
                <div id="form-house" class="space-y-6 hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div >
                            <label for="house-price" class="block text-sm font-medium text-gray-700 mb-1">房屋总价 (万元)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-cny"></i>
                                </span>
                                <input type="number" id="house-price" value="150" min="1" max="10000" 
                                    class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                            </div>
                        </div>
                        <div >
                            <label for="down-payment" class="block text-sm font-medium text-gray-700 mb-1">贷款比例 (%)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                   
                                </span>
                                <select id="down-payment" class="w-full pl-3 text-center pr-0 py-3 border border-gray-300 rounded-lg input-focus">
                                    <option value="15">15%</option>
									<option value="20">20%</option>
                                    <option value="30" selected>30%</option>
                                    <option value="40">40%</option>
                                    <option value="50">50%</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <label for="loan-years-house" class="block text-sm font-medium text-gray-700 mb-1">贷款期限 (年)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                   
                                </span>
                                <select id="loan-years-house" class="w-full pl-3 text-center pr-0 py-3 border border-gray-300 rounded-lg input-focus">
                                    <option value="5">5年</option>
                                    <option value="10">10年</option>
                                    <option value="15">15年</option>
                                    <option value="20">20年</option>
                                    <option value="25">25年</option>
                                    <option value="30" selected>30年</option>
                                </select>
                            </div>
                        </div>
                        <div >
                            <label for="loan-rate-house" class="block text-sm font-medium text-gray-700 mb-1">年利率 (%)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-percent"></i>
                                </span>
                                <input type="number" id="loan-rate-house" value="3.5" min="0" max="30" step="0.01" 
                                    class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                            </div>
                        </div>

                        <div class="md:col-span-2">
                            <label for="repayment-type-house" class="block text-sm font-medium text-gray-700 mb-1">还款方式</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    
									
                                </span>
								
                                <select id="repayment-type-house" class="w-full pl-10 text-center pr-0 py-3 border border-gray-300 rounded-lg input-focus">
                                    <option value="equal-principal-interest">等额本息</option>
                                    <option value="equal-principal">等额本金</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 组合贷款表单 (默认隐藏) -->
                <div id="form-combined" class="space-y-6 hidden">
                    <div class="border-b border-gray-200 pb-4 mb-4">
                        <h4 class="text-base font-medium text-gray-700 mb-2">商业贷款部分</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="commercial-amount" class="block text-sm font-medium text-gray-700 mb-1">商业贷款金额 (万元)</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-cny"></i>
                                    </span>
                                    <input type="number" id="commercial-amount" value="70" min="1" max="10000" 
                                        class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                                </div>
                            </div>
                            <div>
                                <label for="commercial-rate" class="block text-sm font-medium text-gray-700 mb-1">商业贷款年利率 (%)</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-percent"></i>
                                    </span>
                                    <input type="number" id="commercial-rate" value="3.5" min="0" max="30" step="0.01" 
                                        class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                                </div>
                            </div>
								<div> 利率方式：LPR 2025/5/20 一年期3% 五年期3.5%(LPR有银行自主采用）</div>
						<div> 按旧版基准利率 4.9%</div>
                        </div>
                    </div>
                    
                    <div class="border-b border-gray-200 pb-4 mb-4">
                        <h4 class="text-base font-medium text-gray-700 mb-2">公积金贷款部分</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="fund-amount" class="block text-sm font-medium text-gray-700 mb-1">公积金贷款金额 (万元)</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-cny"></i>
                                    </span>
                                    <input type="number" id="fund-amount" value="30" min="1" max="10000" 
                                        class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                                </div>
                            </div>
                            <div>
                                <label for="fund-rate" class="block text-sm font-medium text-gray-700 mb-1">公积金贷款年利率 (%)</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-percent"></i>
                                    </span>
                                    <input type="number" id="fund-rate" value="2.6" min="0" max="30" step="0.01" 
                                        class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                                </div>
                            </div>
		<div> 最新基准利率 2.6%</div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="combined-years" class="block text-sm font-medium text-gray-700 mb-1">贷款期限 (年)</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500" **mr-2**>
                                   
                                </span>
                                <select id="combined-years" class="w-full text-center pl-3 pr-3 py-3 border border-gray-300 rounded-lg input-focus">
                                    <option value="5">5年</option>
                                    <option value="10">10年</option>
                                    <option value="15">15年</option>
                                    <option value="20">20年</option>
                                    <option value="25">25年</option>
                                    <option value="30" selected>30年</option>
                                </select>
                            </div>
                        </div>
                        <div class="md:col-span-2">
                            <label for="combined-repayment-type" class="block text-sm font-medium text-gray-700 mb-1">还款方式</label>
                            <div class="relative" width:80%>
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500" **mr-2**>
                              </span>
                                <select name="select2" class="w-full text-center pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus" id="combined-repayment-type">
                                  <option value="equal-principal-interest">等额本息</option>
                                  <option value="equal-principal">等额本金</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 计算按钮 -->
                <div class="flex justify-center mt-8">
                    <button id="calculate-btn" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium btn-hover flex items-center">
                        <i class="fa fa-calculator mr-2"></i>开始计算
                    </button>
                </div>
            </div>

            <!-- 计算结果 -->
            <div id="result-section" class="bg-white rounded-xl card-shadow p-6 md:p-8 mb-8 hidden">
                <h3 class="text-xl font-bold mb-6 flex items-center">
                    <i class="fa fa-bar-chart text-primary mr-2"></i>计算结果
                    <button id="save-result" class="ml-auto text-sm text-primary hover:text-primary/80 flex items-center">
                        <i class="fa fa-bookmark-o mr-1"></i>保存结果
                    </button>
                </h3>

                <!-- 基本信息概览 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-neutral rounded-lg p-5">
                        <h4 class="text-sm text-gray-500 mb-1">贷款总额</h4>
                        <p id="total-loan-amount" class="text-2xl font-bold text-dark">100.00 万元</p>
                    </div>
                    <div class="bg-neutral rounded-lg p-5">
                        <h4 class="text-sm text-gray-500 mb-1">还款总额</h4>
                        <p id="total-repayment" class="text-2xl font-bold text-dark">184.55 万元</p>
                    </div>
                    <div class="bg-neutral rounded-lg p-5">
                        <h4 class="text-sm text-gray-500 mb-1">支付利息</h4>
                        <p id="total-interest" class="text-2xl font-bold text-accent">84.55 万元</p>
                    </div>
                </div>

                <!-- 贷款构成饼图 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                    <div class="bg-neutral rounded-lg p-5">
                        <h4 class="text-base font-medium text-gray-700 mb-4">贷款构成</h4>
                        <div class="h-64">
                            <canvas id="loan-composition-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 首月还款信息 -->
                    <div class="bg-neutral rounded-lg p-5">
                        <h4 class="text-base font-medium text-gray-700 mb-4">首月还款信息</h4>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center pb-2 border-b border-gray-200">
                                <span class="text-gray-600">首月还款额</span>
                                <span id="first-payment" class="font-medium">6,423.61 元</span>
                            </div>
                            <div class="flex justify-between items-center pb-2 border-b border-gray-200">
                                <span class="text-gray-600">每月递减</span>
                                <span id="monthly-decrease" class="font-medium">10.76 元</span>
                            </div>
                            <div class="flex justify-between items-center pb-2 border-b border-gray-200">
                                <span class="text-gray-600">贷款期限</span>
                                <span id="loan-term" class="font-medium">30年 (360期)</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-600">还款方式</span>
                                <span id="repayment-method" class="font-medium">等额本金</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 还款明细切换 -->
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h4 class="text-base font-medium text-gray-700 w-full" ><div>还款明细</div></h4>
                        <div class="flex items-center w-full">
                          <div class="inline-flex rounded-md shadow-sm ">

							     <button id="view-details" class="py-1.5 px-3 text-sm font-medium text-gray-700  rounded-r-md">
                                    明细表
                                </button>
								<button id="view-summary" class="py-1.5 px-0 text-sm font-medium text-primary  rounded-l-md " >
                                    
                                </button>

                     
                          </div>
                      </div>
                    </div>

                    <!-- 还款汇总表 -->
                    <div id="summary-table" class="overflow-x-auto" hidden>
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">

                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr id="commercial-loan-row">
                                    <td  class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">商业贷款</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">70.00万元</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.65%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">129.19万元</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-accent">59.19万元</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4,496.53元</td>
                                </tr>
                                <tr id="fund-loan-row">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">公积金贷款</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30.00万元</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.10%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">47.36万元</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-accent">17.36万元</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,927.08元</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 还款明细表 (默认隐藏) -->
                  <div id="detail-table" class="overflow-x-auto ">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">期数</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">月供</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">本金</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">利息</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">剩余本金</th>
                                </tr>
                            </thead>
                            <tbody id="payment-schedule" class="bg-white divide-y divide-gray-200">
                                <!-- 动态生成的还款明细 -->
                            </tbody>
                        </table>
                        <div class="mt-4 flex justify-between items-center">
                            <div class="text-sm text-gray-500 w-full" >
                                显示 <span id="current-page-range">1-10</span> 期，共 <span id="total-pages">360</span> 期
                            </div>
                            
                        </div>
                  </div>
                </div>
            </div>

        </div>
    </main>

    <!-- 页脚 -->
<footer class="bg-white border-t border-gray-200"></footer>

    <!-- 保存结果成功提示 -->
    <div id="save-success-toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center">
        <i class="fa fa-check-circle mr-2"></i>
        <span>计算结果已保存</span>
    </div>

    <script>
        // DOM元素
        const modeButtons = {
            commercial: document.getElementById('mode-commercial'),
            fund: document.getElementById('mode-fund'),
            combined: document.getElementById('mode-combined')
        };
        
        const methodButtons = {
            total: document.getElementById('method-total'),
            house: document.getElementById('method-house')
        };
        
        const formContainers = {
            total: document.getElementById('form-total'),
            house: document.getElementById('form-house'),
            combined: document.getElementById('form-combined')
        };
        
        const calculateBtn = document.getElementById('calculate-btn');
        const resultSection = document.getElementById('result-section');
        const saveResultBtn = document.getElementById('save-result');
        const saveSuccessToast = document.getElementById('save-success-toast');
        
        const viewButtons = {
            summary: document.getElementById('view-summary'),
            details: document.getElementById('view-details')
        };
        
        const tables = {
            summary: document.getElementById('summary-table'),
            details: document.getElementById('detail-table')
        };
        
        // 当前活动的贷款模式和计算方式
        let activeMode = 'commercial';
        let activeMethod = 'total';
        
        // 贷款模式切换
        Object.keys(modeButtons).forEach(mode => {
            modeButtons[mode].addEventListener('click', () => {
                // 移除所有模式按钮的活动状态
                Object.values(modeButtons).forEach(btn => {
                    btn.classList.remove('tab-active');
                    btn.classList.add('border-b-2', 'border-transparent', 'text-gray-600');
                });
                
                // 设置当前模式按钮为活动状态
                modeButtons[mode].classList.add('tab-active');
                modeButtons[mode].classList.remove('border-b-2', 'border-transparent', 'text-gray-600');
                
                // 更新活动模式
                activeMode = mode;
                
                // 显示相应的表单
                if (mode === 'combined') {
                    formContainers.combined.classList.remove('hidden');
                    formContainers.total.classList.add('hidden');
                    formContainers.house.classList.add('hidden');
                } else {
                    formContainers.combined.classList.add('hidden');
                    formContainers[activeMethod].classList.remove('hidden');
                }
                
                // 隐藏结果部分
                resultSection.classList.add('hidden');
            });
        });
        
        // 计算方式切换
        Object.keys(methodButtons).forEach(method => {
            methodButtons[method].addEventListener('click', () => {
                // 仅在非组合贷款模式下切换计算方式
                if (activeMode !== 'combined') {
                    // 移除所有方法按钮的活动状态
                    Object.values(methodButtons).forEach(btn => {
                        btn.classList.remove('tab-active');
                        btn.classList.add('border-b-2', 'border-transparent', 'text-gray-600');
                    });
                    
                    // 设置当前方法按钮为活动状态
                    methodButtons[method].classList.add('tab-active');
                    methodButtons[method].classList.remove('border-b-2', 'border-transparent', 'text-gray-600');
                    
                    // 更新活动方法
                    activeMethod = method;
                    
                    // 显示相应的表单
                    formContainers.total.classList.add('hidden');
                    formContainers.house.classList.add('hidden');
                    formContainers[method].classList.remove('hidden');
                    
                    // 隐藏结果部分
                    resultSection.classList.add('hidden');
                }
            });
        });
        
        // 查看方式切换
        viewButtons.summary.addEventListener('click', () => {
            tables.summary.classList.remove('hidden');
            tables.details.classList.add('hidden');
            viewButtons.summary.classList.add('bg-white', 'text-primary', 'border-primary');
            viewButtons.summary.classList.remove('bg-gray-50', 'text-gray-700', 'border-gray-300');
            viewButtons.details.classList.add('bg-gray-50', 'text-gray-700', 'border-gray-300');
            viewButtons.details.classList.remove('bg-white', 'text-primary', 'border-primary');
        });
        
        viewButtons.details.addEventListener('click', () => {
            tables.summary.classList.add('hidden');
            tables.details.classList.remove('hidden');
            viewButtons.details.classList.add('bg-white', 'text-primary', 'border-primary');
            viewButtons.details.classList.remove('bg-gray-50', 'text-gray-700', 'border-gray-300');
            viewButtons.summary.classList.add('bg-gray-50', 'text-gray-700', 'border-gray-300');
            viewButtons.summary.classList.remove('bg-white', 'text-primary', 'border-primary');
        });
        
        // 保存结果
        saveResultBtn.addEventListener('click', () => {
            saveSuccessToast.classList.remove('translate-y-16', 'opacity-0');
            
            setTimeout(() => {
                saveSuccessToast.classList.add('translate-y-16', 'opacity-0');
            }, 3000);
        });
        
        // 计算按钮点击事件
        calculateBtn.addEventListener('click', () => {
            calculateMortgage();
            resultSection.classList.remove('hidden');
            // 滚动到结果部分
            resultSection.scrollIntoView({ behavior: 'smooth' });
        });
        
        // 计算房贷
        function calculateMortgage() {
            let principal, rate, years, repaymentType;
            let commercialPrincipal = 0, commercialRate = 0;
            let fundPrincipal = 0, fundRate = 0;
            
            // 根据不同的贷款模式和计算方式获取输入值
            if (activeMode === 'combined') {
                // 组合贷款
                commercialPrincipal = parseFloat(document.getElementById('commercial-amount').value) * 10000;
                commercialRate = parseFloat(document.getElementById('commercial-rate').value) / 100 / 12;
                fundPrincipal = parseFloat(document.getElementById('fund-amount').value) * 10000;
                fundRate = parseFloat(document.getElementById('fund-rate').value) / 100 / 12;
                years = parseInt(document.getElementById('combined-years').value);
                repaymentType = document.getElementById('combined-repayment-type').value;
                
                principal = commercialPrincipal + fundPrincipal;
                rate = (commercialRate * commercialPrincipal + fundRate * fundPrincipal) / principal;
            } else {
                // 商业贷款或公积金贷款
                if (activeMethod === 'total') {
                    principal = parseFloat(document.getElementById('loan-amount').value) * 10000;
                    rate = parseFloat(document.getElementById('loan-rate').value) / 100 / 12;
                    years = parseInt(document.getElementById('loan-years').value);
                    repaymentType = document.getElementById('repayment-type').value;
                } else {
                    const housePrice = parseFloat(document.getElementById('house-price').value) * 10000;
                    const downPaymentRate = parseFloat(document.getElementById('down-payment').value) / 100;
                    principal = housePrice * (1 - downPaymentRate);
                    rate = parseFloat(document.getElementById('loan-rate-house').value) / 100 / 12;
                    years = parseInt(document.getElementById('loan-years-house').value);
                    repaymentType = document.getElementById('repayment-type-house').value;
                }
            }
            
            const months = years * 12;
            
            // 计算结果
            let totalPayment = 0;
            let totalInterest = 0;
            let firstPayment = 0;
            let monthlyDecrease = 0;
            
            if (repaymentType === 'equal-principal-interest') {
                // 等额本息
                const monthlyPayment = principal * rate * Math.pow(1 + rate, months) / (Math.pow(1 + rate, months) - 1);
                totalPayment = monthlyPayment * months;
                totalInterest = totalPayment - principal;
                firstPayment = monthlyPayment;
            } else {
                // 等额本金
                const monthlyPrincipal = principal / months;
                let interestSum = 0;
                
                // 计算总利息
                for (let i = 0; i < months; i++) {
                    const remainingPrincipal = principal - monthlyPrincipal * i;
                    const monthlyInterest = remainingPrincipal * rate;
                    interestSum += monthlyInterest;
                }
                
                totalPayment = principal + interestSum;
                totalInterest = interestSum;
                firstPayment = monthlyPrincipal + principal * rate;
                monthlyDecrease = monthlyPrincipal * rate;
            }
            
            // 更新结果显示
            document.getElementById('total-loan-amount').textContent = (principal / 10000).toFixed(2) + ' 万元';
            document.getElementById('total-repayment').textContent = (totalPayment / 10000).toFixed(2) + ' 万元';
            document.getElementById('total-interest').textContent = (totalInterest / 10000).toFixed(2) + ' 万元';
            document.getElementById('first-payment').textContent = firstPayment.toFixed(2) + ' 元';
            document.getElementById('monthly-decrease').textContent = monthlyDecrease.toFixed(2) + ' 元';
            document.getElementById('loan-term').textContent = `${years}年 (${months}期)`;
            document.getElementById('repayment-method').textContent = repaymentType === 'equal-principal-interest' ? '等额本息' : '等额本金';
            
            // 更新贷款构成图表
            updateLoanCompositionChart(principal, totalInterest);
            
            // 更新汇总表
            updateSummaryTable(principal, totalPayment, totalInterest, firstPayment, commercialPrincipal, commercialRate, fundPrincipal, fundRate, years, repaymentType);
            
            // 生成还款明细表前10条
            generatePaymentSchedule(principal, rate, months, repaymentType);
        }
        
        // 更新贷款构成图表
        function updateLoanCompositionChart(principal, interest) {
            const ctx = document.getElementById('loan-composition-chart').getContext('2d');
            
            // 销毁已存在的图表
            if (window.loanChart) {
                window.loanChart.destroy();
            }
            
            // 创建新图表
            window.loanChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: ['本金', '利息'],
                    datasets: [{
                        data: [principal, interest],
                        backgroundColor: ['#0066CC', '#FF7D00'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${(value / 10000).toFixed(2)}万元 (${percentage}%)`;
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
        }
        
        // 更新汇总表
        function updateSummaryTable(totalPrincipal, totalPayment, totalInterest, firstPayment, commercialPrincipal, commercialRate, fundPrincipal, fundRate, years, repaymentType) {
            const months = years * 12;
            
            // 计算商业贷款部分
            let commercialTotalPayment = 0;
            let commercialTotalInterest = 0;
            let commercialFirstPayment = 0;
            
            if (commercialPrincipal > 0) {
                if (repaymentType === 'equal-principal-interest') {
                    const monthlyPayment = commercialPrincipal * commercialRate * Math.pow(1 + commercialRate, months) / (Math.pow(1 + commercialRate, months) - 1);
                    commercialTotalPayment = monthlyPayment * months;
                    commercialTotalInterest = commercialTotalPayment - commercialPrincipal;
                    commercialFirstPayment = monthlyPayment;
                } else {
                    const monthlyPrincipal = commercialPrincipal / months;
                    let interestSum = 0;
                    
                    for (let i = 0; i < months; i++) {
                        const remainingPrincipal = commercialPrincipal - monthlyPrincipal * i;
                        const monthlyInterest = remainingPrincipal * commercialRate;
                        interestSum += monthlyInterest;
                    }
                    
                    commercialTotalPayment = commercialPrincipal + interestSum;
                    commercialTotalInterest = interestSum;
                    commercialFirstPayment = monthlyPrincipal + commercialPrincipal * commercialRate;
                }
            }
            
            // 计算公积金贷款部分
            let fundTotalPayment = 0;
            let fundTotalInterest = 0;
            let fundFirstPayment = 0;
            
            if (fundPrincipal > 0) {
                if (repaymentType === 'equal-principal-interest') {
                    const monthlyPayment = fundPrincipal * fundRate * Math.pow(1 + fundRate, months) / (Math.pow(1 + fundRate, months) - 1);
                    fundTotalPayment = monthlyPayment * months;
                    fundTotalInterest = fundTotalPayment - fundPrincipal;
                    fundFirstPayment = monthlyPayment;
                } else {
                    const monthlyPrincipal = fundPrincipal / months;
                    let interestSum = 0;
                    
                    for (let i = 0; i < months; i++) {
                        const remainingPrincipal = fundPrincipal - monthlyPrincipal * i;
                        const monthlyInterest = remainingPrincipal * fundRate;
                        interestSum += monthlyInterest;
                    }
                    
                    fundTotalPayment = fundPrincipal + interestSum;
                    fundTotalInterest = interestSum;
                    fundFirstPayment = monthlyPrincipal + fundPrincipal * fundRate;
                }
            }
            
            // 更新表格
            if (commercialPrincipal > 0) {
                document.getElementById('commercial-loan-row').classList.remove('hidden');
                document.getElementById('commercial-loan-row').innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">商业贷款</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(commercialPrincipal / 10000).toFixed(2)}万元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(commercialRate * 12 * 100).toFixed(2)}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(commercialTotalPayment / 10000).toFixed(2)}万元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-accent">${(commercialTotalInterest / 10000).toFixed(2)}万元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${commercialFirstPayment.toFixed(2)}元</td>
                `;
            } else {
                document.getElementById('commercial-loan-row').classList.add('hidden');
            }
            
            if (fundPrincipal > 0) {
                document.getElementById('fund-loan-row').classList.remove('hidden');
                document.getElementById('fund-loan-row').innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">公积金贷款</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(fundPrincipal / 10000).toFixed(2)}万元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(fundRate * 12 * 100).toFixed(2)}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(fundTotalPayment / 10000).toFixed(2)}万元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-accent">${(fundTotalInterest / 10000).toFixed(2)}万元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${fundFirstPayment.toFixed(2)}元</td>
                `;
            } else {
                document.getElementById('fund-loan-row').classList.add('hidden');
            }
        }
        
        // 生成还款明细表
        function generatePaymentSchedule(principal, rate, months, repaymentType) {
            const paymentSchedule = document.getElementById('payment-schedule');
            paymentSchedule.innerHTML = '';
            
            const monthlyPrincipal = principal / months;
            let remainingPrincipal = principal;
            
            // 只生成前10条记录
            const recordsToGenerate = Math.min(360, months);
            
            for (let i = 1; i <= recordsToGenerate; i++) {
                let monthlyPayment = 0;
                let monthlyInterest = 0;
                
                if (repaymentType === 'equal-principal-interest') {
                    // 等额本息
                    monthlyPayment = principal * rate * Math.pow(1 + rate, months) / (Math.pow(1 + rate, months) - 1);
                    monthlyInterest = remainingPrincipal * rate;
                } else {
                    // 等额本金
                    monthlyInterest = remainingPrincipal * rate;
                    monthlyPayment = monthlyPrincipal + monthlyInterest;
                }
                
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${i}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${monthlyPayment.toFixed(2)}元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(monthlyPayment - monthlyInterest).toFixed(2)}元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-accent">${monthlyInterest.toFixed(2)}元</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${(remainingPrincipal - monthlyPrincipal).toFixed(2)}元</td>
                `;
                
                paymentSchedule.appendChild(row);
                remainingPrincipal -= monthlyPrincipal;
            }
            
            // 更新页码信息
            document.getElementById('current-page-range').textContent = `1-${recordsToGenerate}`;
            document.getElementById('total-pages').textContent = months;
        }
        
        // 初始化
        function init() {
            // 默认显示商业贷款-按贷款总额表单
            formContainers.total.classList.remove('hidden');
            formContainers.house.classList.add('hidden');
            formContainers.combined.classList.add('hidden');
            
            // 隐藏组合贷款的行
            document.getElementById('commercial-loan-row').classList.add('hidden');
            document.getElementById('fund-loan-row').classList.add('hidden');
        }
        
        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>    